<template>
	<div class="desciption-container">
		<div class="titleImg" @click="showIframe">
			<img :src="props.isSecondLevel ? url2 : url1" alt="">
			<p class="title-text" :class="props.isSecondLevel ? 'title-text-two' : 'title-text-one'">{{ props.title }}</p>
		</div>
		<div class="content" v-if="!disableContent">
			<slot></slot>
		</div>
		<el-dialog v-model="centerDialogVisible" append-to-body :title="props.title">
			<img :src='iframeImg' alt="暂无数据" class="iframeImg">
		</el-dialog>
	</div>
</template>

<script lang="ts" setup>
	import {
		computed,
		reactive,
		ref
	} from 'vue'

	const props: any = defineProps({
		url: String,
		title: String,
		disableContent: Boolean,
		isSecondLevel: Boolean
	})
	const url1 = ref < string > (new URL("@/assets/img/header/header2.png",
		import.meta.url).href)
	const url2 = ref < string > (new URL("@/assets/img/header/secondTitle.png",
		import.meta.url).href)
	const iframeImg = computed(() => {
		const titleUrl = dialogIframe[props.title]
		if (titleUrl) return new URL(titleUrl,
			import.meta.url).href
		else return false
	})
	const centerDialogVisible = ref(false)
	const showIframe = () => {
		// iframeImg.value && (centerDialogVisible.value = true)
	}
	const dialogIframe = reactive({
		'抢修信息': "../../assets/index/iframe/faultLocate.png",
		'故障信息': "../../assets/index/iframe/faultIsola.png",
		'报障信息': "../../assets/index/iframe/faultInfo.png",
		'停复电分析报告': "../../assets/index/iframe/faultFix.png",
	})
</script>

<style scoped lang="scss">
	.desciption-container {

		// width: 1480px;
		.title-text-one {
			position: absolute;
			left: 2.3em;
			font-size: 0.8em;
			height: 2em;
			top: -0.1em;
			line-height: 1.5;
			font-family: "dyzg";
			letter-spacing: 0.1em;
		}
		
		.title-text-two {
			position: absolute;
			left: 3em;
			font-size: 2em;
			top: -1.8em;
			font-family: "dyzg";
			letter-spacing: 0.1em;
			line-height: 1.5;
		}

		.font-css {
			// text-shadow: 0 0 6px #159aff;
			background: -webkit-linear-gradient(135deg,
					#ffffff,
					#8bf4ff 25%,
					#6fcdff 50%,
					#01e6ff 55%,
					#5da1e0 60%,
					#def6ff 80%,
					#e0ecff 95%,
					#ffffff);
			/* 文字颜色填充设置为透明 */
			-webkit-text-fill-color: transparent;
			/* 背景裁剪，即让文字使用背景色 */
			-webkit-background-clip: text;
			/* 背景图放大一下，看着柔和一些 */
			-webkit-background-size: 200% 100%;
			/* 应用动画flowCss 12秒速度 无限循环 线性匀速动画*/
			-webkit-animation: flowCss 12s infinite linear;
		}

		@-webkit-keyframes flowCss {
			0% {
				/* 移动背景位置 */
				background-position: 0 0;
			}

			100% {
				background-position: -400% 0;
			}
		}

		// .font-css:hover {
		// 	-webkit-animation: flowCss 4s infinite linear;
		// }

		.titleImg {
			// height: 90.24px;
			width: 100%;
			position: relative;
			// background-image: url('@/assets/index/title/title.png');
			// background-size: 100% 100%;
			
			>img {
				display: block;
				// height: 100%;
				width: 100%;
			}
		}

		>.content {
			width: 100%;
			height: 100%;
			padding: 0 40px 20px;
			margin: 10px 0 0 0;
			box-sizing: border-box;
		}
	}

 
</style>
